<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <html>
        <head>
            <meta charset="utf-8">
            <title>颜色展示</title>
            <meta name="renderer" content="webkit">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


            <link rel="icon" th:href="@{LightYear/favicon-def.ico}" href="LightYear/favicon-def.ico" type="image/ico">
            <link th:href="@{LightYear/css/bootstrap.min.css}" href="LightYear/css/bootstrap.min.css" rel="stylesheet">
            <link th:href="@{LightYear/css/materialdesignicons.min.css}" href="LightYear/css/materialdesignicons.min.css" rel="stylesheet">
            <link th:href="@{LightYear/css/style.min.css}" href="LightYear/css/style.min.css" rel="stylesheet">

            <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
            <link rel="stylesheet" href="Layuimini/css/public.css" media="all">
            <link rel="stylesheet" type="text/css" href="colorUtils/css/index.css"/>


            <script type="text/javascript" th:src="@{LightYear/js/jquery.min.js}" src="LightYear/js/jquery.min.js"></script>
            <script type="text/javascript" th:src="@{LightYear/layer/layer.js}" src="LightYear/layer/layer.js"></script>

            <script src="Layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
           <script src="Layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
            <script src="Layuimini/lib/jq-module/paigusu.min.js" charset="utf-8"></script>
            <script src="colorUtils/js/index.js" type="text/javascript" charset="utf-8"></script>
            </div>


            <style type="text/css">
                /* 元素位置固定 */
                #position{
                   /* position:fixed;
                    height:100px;
                    width:100px;
                    left:525px;
                    top:540px;
                    background-color:white;*/
                    position:fixed;
                    top:395px;
                }
            </style>

            <style type="text/css">
                .colorPicker{
                    border: 1px solid #ccc;
                    width: 122px;
                    height:36px;
                    margin-left: 10px;
                    float: left;
                }
            </style>

        </head>
        <body>
            <div class="layuimini-container">
                <br>
             <form class="form-inline" role="form" style="float: left;">
                    <div class="form-group has-feedback">
                        <div class="input-group">
                           <!-- &lt;!&ndash;   <div class="input-group-addon">查询条件</div>&ndash;&gt;-->
                            <input id="searchParam" class="form-control has-success" type="text"
                                   name ="condition" placeholder="请输入颜色或者关键字" value="">
                        </div>
                    </div>
                    <button id="searchBtn" type="button" class="btn btn-secondary" >
                        <i class="glyphicon glyphicon-search"></i> 查询
                    </button>
                    &ensp;
                    <button id="resetBtn" type="button" class="btn btn-secondary" >
                        <i class="glyphicon glyphicon-reset"></i> 重置
                    </button>

                <!-- <div class="layui-form-item" style="margin-left: 50px;margin-top: 18px">
                     <label class="layui-form-label" style="min-width:100px;">颜色预览器</label>
                     <div class="layui-input-inline">
                         <input type="hidden" name="test_color" value="#FFB6C1">
                         <span class="layui-btn layui-btn-primary test-select-color" style="padding:0 12px;min-width:45px;height:32px;background-color: #FFB6C1;"></span>
                     </div>
                 </div>-->


                 <div class="layui-form-item" style="margin-left: 50px;margin-top: 18px">
                     <label class="layui-form-label" style="min-width:100px;">颜色预览器</label>
                     <div class="layui-input-inline">
                         <div class="colorPicker1 colorPicker"></div>
                     </div>
                 </div>
                    &ensp;
                </form>



                <table class="table table-hover" style="text-align: center;">

                    <tr>
                        <th >序号</th>
                        <th>英文名称</th>
                        <th>中文描述</th>
                        <th>十六进制</th>
                        <th>RGB</th>
                        <th th:width="220px">颜色预览</th>
                    </tr>
                    <tr th:each="color,stat:${list}"><!--循环userList,以person作为形参-->
                      <!--  <td th:text="${stat.count}"></td>-->
                        <td th:text="${color.id}"></td>
                        <td th:text="${color.englicDesc}"></td>
                        <td th:text="${color.chineseDesc}"></td>
                        <td th:text="${color.hexadecimalNum}"></td>
                        <td th:text="${color.rgbDesc}"></td>
                        <td th:bgcolor="${color.hexadecimalNum }"></td>
                    </tr>


                </table>

                <nav>
                    <ul class="pagination" id="position">
                        <li class="page-item">
                            <a class="page-link" href="#!" th:href="@{${jumpUrl}}" th:text="首页" th:if="${page.current>1}" aria-label="Previous">
                                <span aria-hidden="true"><i class="mdi mdi-chevron-left"></i></span>
                            </a>
                        </li>

                        <li class="page-item">
                            <a class="page-link" href="#!" th:href="@{${jumpUrl}+${page.current-1}}" th:if="${page.current>1}" aria-label="Previous">
                                <span aria-hidden="true"><i class="mdi mdi-chevron-left"></i></span>
                                <span class="sr-only">上一页</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#!" th:text=" 第+${page.current}+页">4</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#!" th:href="@{${jumpUrl}+${page.current+1}}"  th:if="${page.current<page.pages}" aria-label="Next">
                                <span aria-hidden="true"><i class="mdi mdi-chevron-right"></i></span>
                                <span class="sr-only">下一页</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link"  th:href="@{${jumpUrl}+${page.pages}}" th:text="尾页"  th:if="${page.current<page.pages}" >
                                <span><i class="mdi mdi-chevron-right"></i></span>
                                <span class="sr-only">尾页</span>
                            </a>
                        </li>

                        <li class="page-item"><a class="page-link" href="#!"  th:text="共+${page.pages}+页"></a></li>
                        <li class="page-item"><a class="page-link" href="#!"  th:text="总共+${page.total}+'条记录'"></a></li>
                    </ul>
                </nav>

            </div>
            </div>
            <script>


                $("#searchBtn").click(function(){

                    var condition =    $("#searchParam").val();
                    if(condition==""){
                        layer.tips("查询条件不能为空！","#searchParam");
                    }else{
                        window.location.href="toColorPage?condition="+condition;
                    }
                });

                $("#resetBtn").click(function(){
                    window.location.href="toColorPage";
                })

            </script>
            <script>

                $(".colorPicker1").colorPicker({
                    callback:function(color){
                        console.log("color1",color)
                    }
                })



             /*   $(function () {
                    $('.test-select-color').paigusu({
                        color: '#FFB6C1',//初始色  支持两种配置方案
                    }, function (event, obj) {
                        //console.log(event);
                        //console.log(obj);
                        $(event).css('background-color', '#' + obj.hex);
                        $('input[name="test_color"]').val('#' + obj.hex);
                    });
                });*/
            </script>

        </body>
    </html>